<template>
    <div class="newde ">
        <ul >
            <li v-for="item,index in deInfo" :key="item.id">
                <img :src="item.picUrl" alt="">
                <p>{{ item.name }}</p>
                <span>{{ item.company }}</span>
            </li>
        </ul>
        <span class="left">&lt;</span>
        <span class="rgit">&gt;</span>
    </div>
</template>

<script>
export default {
    data () {
        return {

 
        }
    },
    props:['deInfo']
}
</script>
 
<style lang = "less" scoped>
    @import "../../assets/base.less";
    .newde{
        margin-bottom: 30px;
        position: relative;
        width: 706px;
        overflow: hidden;
        ul {
        margin-top: 20px;
        width: 1900px;
        margin-left: 10px;
        li {
            float: left;
            position: relative;
            width: 140px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            margin-right: 40px;
            img {
                width: 140px;
                height: 140px;
            }
            p{
                cursor: pointer;
                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
    .left,.rgit{
        display: block;    
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        z-index: 10px;
        font-size: 25px;
        font-weight: 1000;
        text-align: center;
        color: #ccc;
        font-family: '宋体';
        cursor: pointer;
        &:hover{
            color: #666;
        }
    }
    .left{
        left: -2px;
    }
    .rgit{
        right: 1px;
    }
    }
    
</style>